<template>
    <div class="wrapper main-wrapper">
        <!-- 轮播图 -->
        <div class="banner">
            <Carousel></Carousel>
        </div>
        <div class="col-lg-12">
            <section class="box nobox marginBottom0">
                <div class="content-body">
                    <div class="row" style="width: 100%;">
                        <smallCard style="width: 20%;" @click="ChangeTab('IndustrialMap')">
                            <template #cardbox>
                                <div class="stats" style="margin-left: 25px;">
                                    <h3 class="color-white mb-5 numbers">37</h3>
                                    <span>产业链节点数量</span>
                                </div>
                            </template>
                        </smallCard>
                        <smallCardHover style="width: 20%;" @click="ChangeTab('NationalObservation')">
                            <template #textOne>
                                <div class="stats" style="margin-left: 25px;">
                                    <h3 class="mb-5 numbers">37754</h3>
                                    <span>链上企业总数量</span>
                                </div>
                            </template>
                        </smallCardHover>
                        <smallCardHover style="width: 20%;" @click="ChangeTab('BeijingWatch')">
                            <template #textTwo>
                                <div class="stats" style="margin-left: 25px;">
                                    <h3 class="mb-5 numbers">5446</h3>
                                    <span>北京企业数量</span>
                                </div>
                            </template>
                        </smallCardHover>
                        <smallCardHover style="width: 20%;" @click="ChangeTab('EnterpriseNumber')">
                            <template #textTwo>
                                <div class="stats" style="margin-left: 25px;">
                                    <h3 class="mb-5 numbers">1205</h3>
                                    <span>丰台企业数量</span>
                                </div>
                            </template>
                        </smallCardHover>
                        <smallCardHover style="width: 20%;" @click="ChangeTab('recommend')">
                            <template #textTwo>
                                <div class="stats" style="margin-left: 25px;">
                                    <h3 class="mb-5 numbers">680</h3>
                                    <span>招引企业推荐</span>
                                </div>
                            </template>
                        </smallCardHover>
                    </div>
                </div>
            </section>
        </div>
        <keep-alive>
            <component :is="showMap"></component>
        </keep-alive>

    </div>
</template>
<script>
import smallCard from '@/components/scCard/smallCard'
import smallCardHover from '@/components/scCard/smallCardHover'
// 引入轮播图组件
import Carousel from '@/views/cockpit/components/Carousel'
// 引入产业链图组件
import IndustrialMap from '@/views/cockpit/components/IndustrialMap'
// 引入全国链上企业图
import NationalObservation from '@/views/cockpit/components/NationalObservation'
// 引入北京链上企业图
import BeijingWatch from '@/views/cockpit/components/BeijingWatch'
// 引入丰台企业数量组件
import recommend from '@/views/cockpit/components/recommend'
// 引入招商推荐组件
import EnterpriseNumber from '@/views/cockpit/EnterpriseNumber'
export default {
    components: {
        smallCard,
        smallCardHover,
        EnterpriseNumber,
        IndustrialMap,
        NationalObservation,
        BeijingWatch,
        recommend,
        Carousel
    },
    data() {
        return {
            // 组件默认显示产业链图
            showMap: 'IndustrialMap',
            currentPage: 1,
            pageSize: 100,
        }
    },
    mounted() {

    },
    methods: {
        // 点击切换组件
        ChangeTab(tab) {
            this.showMap = tab
        }
    },
}
</script>

<style scoped lang="scss">
/* 引入css */
@import "@/views/personalCenter/css/index.css";

.banner {
    width: 100%;
    // padding: 0 15px;
}

.numbers {
    font-size: 35px;
}

::v-deep .el-collapse-item__header {
    font-size: 20px !important;
}

.col-lg-4 {
    max-width: 20%;
}

.row {
    margin: auto;
}

.map-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.map-box,
.col-lg-12 {
    padding: 0 15px;

}
</style>